<template>
  <div class="content-wrapper">
    <div style="background: white;padding: 30px 20px;">
      <el-tabs v-model="activeName" tab-position="left" @tab-click="handleClick">
        <el-tab-pane label="记分规则" name="1">
          <ScoreRuleModal :tabTitle="tabTitle" ref="ScoreRuleModalRef" />
        </el-tab-pane>
        <el-tab-pane label="推送设置" name="2">
          <PushRecord :tabTitle="tabTitle" ref="PushRecordRef" />
        </el-tab-pane>
        <el-tab-pane label="设备管理" name="3">
          <VisualManage :tabTitle="tabTitle" ref="VisualManageRef" />
        </el-tab-pane>
        <el-tab-pane label="学生信息" name="4">
          <StudentList :tabTitle="tabTitle" ref="StudentListRef" />
        </el-tab-pane>
        <el-tab-pane label="老师信息" name="5">
          <TeacherList :tabTitle="tabTitle" ref="TeacherListRef" />
        </el-tab-pane>
        <el-tab-pane label="课程信息" name="6">
          <CourseList :tabTitle="tabTitle" ref="CourseListRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ScoreRuleModal from "../../components/setting/ScoreRuleModal";
import PushRecord from "../../components/setting/PushRecord";
import VisualManage from "../../components/setting/VisualManage";
import StudentList from "../../components/setting/StudentList";
import TeacherList from "../../components/setting/TeacherList";
import CourseList from "../../components/setting/CourseList";
import { mapActions } from "vuex";

export default {
  components: {
    ScoreRuleModal, PushRecord, VisualManage, StudentList, TeacherList, CourseList
  },
  data() {
    return {
      activeName: '1',
      tabTitle: "记分规则",
    }
  },

  mounted() {
    this.handleClick();
    this.getCourseList();
    this.getGradeList();
  },

  methods: {
    ...mapActions(["getCourseList", "getGradeList"]),

    handleClick(tab) {
      if (tab && tab.label) {
        this.tabTitle = tab.label;
      }
      switch (this.activeName) {
        case "1":
          this.$refs.ScoreRuleModalRef.getScoreRuleList();
          break;
        case "2":

          break;
        case "3":
          this.$refs.VisualManageRef.getVisualDevicesList();
          break;
        case "4":
          this.$refs.StudentListRef.getStudentList();
          break;
        case "5":
          this.$refs.TeacherListRef.getTeacherList();
          break;
        case "6":
          this.$refs.CourseListRef.getCourseList();
          break;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.content-wrapper {
  padding: 30px 0 50px 0;
}

.el-tabs >>> .el-tabs__header.is-left {
  margin-right: 30px !important;
  width: 120px;
}

.el-tabs >>> .el-tabs__item{
  height: 45px;
  line-height: 45px;
  text-align: center;
}

.el-tabs >>> .el-tabs__item.is-active{
  background-color: #f1f7ff;
  color: #409EFF;
}
</style>
